﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="PeisongWeb.demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Infinite Carousel图片左右移动代码</title>
    <style type="text/css" media="screen">
        body
        {
            font: 1em "Trebuchet MS" , verdana, arial, sans-serif;
            font-size: 100%;
        }
        input, textarea
        {
            font-family: Arial;
            font-size: 125%;
            padding: 7px;
        }
        label
        {
            display: block;
        }
        .infiniteCarousel
        {
            width: 280px;
            position: relative;
            margin: 0 auto;
            height: 100px;
        }
        .infiniteCarousel .wrapper
        {
            width: 200px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
            overflow: auto;
            min-height: 10em;
            margin: 0 40px;
            position: absolute;
            top: 0;
        }
        .infiniteCarousel ul a img
        {
            border: 5px solid #000;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }
        .infiniteCarousel .wrapper ul
        {
            width: 9999px;
            list-style-image: none;
            list-style-position: outside;
            list-style-type: none;
            margin: 0;
            padding: 0;
            position: absolute;
            top: 0;
        }
        .infiniteCarousel ul li
        {
            display: block;
            float: left;
            padding: 10px;
            height: 85px;
            width: 85px;
        }
        .infiniteCarousel ul li a img
        {
            display: block;
        }
        .infiniteCarousel .arrow
        {
            display: block;
            height: 36px;
            width: 37px;
            background: url(app_common/demoImg/arrow.png) no-repeat 0 0;
            text-indent: -999px;
            position: absolute;
            top: 37px;
            cursor: pointer;
        }
        .infiniteCarousel .forward
        {
            background-position: 0 0;
            right: 0;
        }
        .infiniteCarousel .back
        {
            background-position: 0 -72px;
            left: 0;
        }
        .infiniteCarousel .forward:hover
        {
            background-position: 0 -36px;
        }
        .infiniteCarousel .back:hover
        {
            background-position: 0 -108px;
        }
    </style>
    <%--<script src="jquery.min.js"></script>--%>

    <script src="app_common/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="infiniteCarousel">
        <div class="wrapper">
            <ul>
                <li><a href="#" title="Tall Glow">
                    <img src="app_common/demoImg/3047034661_f96548965e_s.jpg" height="75" width="75"
                        alt="Tall Glow" /></a></li>
                <li><a href="#" title="Wet Cab">
                    <img src="app_common/demoImg/3047872076_61a511a04b_s.jpg" height="75" width="75"
                        alt="Wet Cab" /></a></li>
                <li><a href="#" title="Rockefella">
                    <img src="app_common/demoImg/3047871878_84bfacbd35_s.jpg" height="75" width="75"
                        alt="Rockefella" /></a></li>
                <li><a href="#" title="Chrysler Reflect">
                    <img src="app_common/demoImg/3047034929_97eaf50ea3_s.jpg" height="75" width="75"
                        alt="Chrysler Reflect" /></a></li>
                <li><a href="#" title="Chrysler Up">
                    <img src="app_common/demoImg/3047871624_2cacca4684_s.jpg" height="75" width="75"
                        alt="Chrysler Up" /></a></li>
                <li><a href="#" title="Time Square Awe">
                    <img src="app_common/demoImg/3047034661_f96548965e_s.jpg" height="75" width="75"
                        alt="Time Square Awe" /></a></li>
                <li><a href="#" title="Wonky Buildings">
                    <img src="app_common/demoImg/3047034531_9c74359401_s.jpg" height="75" width="75"
                        alt="Wonky Buildings" /></a></li>
                <li><a href="#" title="Leaves of Fall">
                    <img src="app_common/demoImg/3047034451_121c93386f_s.jpg" height="75" width="75"
                        alt="Leaves of Fall" /></a></li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>
